<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>党的百年成就之科技</title>
		<link rel="stylesheet" href="swiper/swiper/swiper-bundle.css" />
		<script src="swiper/swiper/swiper-bundle.min.js"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0-beta3/css/all.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<div class="dingbuw">
			<div class="hf">
				<img src="img/hf5.png" alt="横幅">
			</div>
			<!-- 头部 -->
			<div class="dws">
				<div class="toubu">
					<img src="img/logo.png" alt="logo">
					<div class="sskhz">
						<div class="ssk">
							<form>
								<input type="search" class="wbk" placeholder="了解中国百年奋斗征程" />
								<a class="tj">
									<i class="fas fa-search"></i>
								</a>
							</form>
						</div>
					</div>
					<ul>
						<li>消息</li>
						<div class="fg"></div>
						<li>收藏</li>
						<div class="fg"></div>
						<li>投稿</li>
						<div class="fg"></div>
						<li>动态</li>
					</ul>
					<div class="denglu">
						<a href="#"><i class="fas fa-user-circle"></i></a>
					</div>
				</div>
			</div>
			<!-- 导航栏 -->
			<div class="dwx">
				<div class="dhl">
					<ul>
						<li class="sy"><a href="index.html">百年科创 世纪芳华</a></li>
						<li><a href="two.html">科技成果 彪炳史册</a></li>
						<li><a href="three.html">科技人才 英雄辈出</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 中间内容1 -->
		<div class="zjnrw">
			<div class="zjnrn">
				<!-- 左边内容 -->
				<div class="tphsp">
					<div class="zuo">
						<!-- 轮播图 -->
						<div class="zphz">
							<div class="swiper">
								<div class="swiper-wrapper">
									<div class="swiper-slide"><img src="img/lbt01.jpg"></div>
									<div class="swiper-slide"><img src="img/lbt02.jpg"></div>
									<div class="swiper-slide"><img src="img/lbt03.jpg"></div>
									<div class="swiper-slide"><img src="img/lbt04.jpg"></div>
									<div class="swiper-slide"><img src="img/lbt05.jpg"></div>
									<div class="swiper-slide"><img src="img/lbt06.jpg"></div>
									<div class="swiper-slide"><img src="img/lbt07.jpg"></div>
									<div class="swiper-slide"><img src="img/lbt08.jpg"></div>
								</div>
								<!-- 如果需要导航按钮 -->
								<div class="swiper-button-prev"></div>
								<div class="swiper-button-next"></div>
								<!-- 如果需要分页器 -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
						<div class="sphz">
							<div class="spdw">
								<video src="img/China.mp4" controls loop autoplay muted></video>
								<div class="djsjs">
								</div>
								<div class="djsj">
									<div class="spjs">
										<h3>党的百年科技发展震撼视频</h3>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 右边内容 -->
					<div class="wzjs">
						<div class="gn">
							<div class="dhdw">
								<div class="ydxhz"></div>
							</div>
							<div class="tw">
								<a href="#"><i class="fa fa-share-square"></i></a>
								<h5>转发</h5>
							</div>
							<div class="tw">
								<a href="#"><i class="fa fa-edit"></i></a>
								<h5>评论</h5>
							</div>
							<div class="tw">
								<a href="#"><i class="fa fa-star"></i></a>
								<h5>收藏</h5>
							</div>
							<div class="tw">
								<a href="#"><i class="fa fa-thumbs-up"></i></a>
								<h5>点赞</h5>
							</div>
							<div class="tw">
								<a href="#"><i class="fa fa-bullhorn"></i></a>
								<h5>播报</h5>
							</div>
							<div class="tw">
								<h5>—— —— —— —— —— —— —— —— </h5>
							</div>
						</div>
						<div class="rjs">
							<p>百年来，中国在科技领域取得巨大进步，在各个领域均出现世界前列的成果：载人航天，一次次刷新“中国高度”；蛟龙号探海，不断拓展“中国深度”；世界最大单口径射望远镜，造就一流“中国视野”；超级计算机，挑战“中国速度”；世界首颗量子科学卫星“墨子号”，开启全球化量子通信；中国大数据体系，让物联网、人工智能领先世界。
							</p>
						</div>
					</div>
				</div>
				<!-- 中间内容下半部分 -->
				<!-- 特点上 -->
			</div>
		</div>
		<div class="wai">
			<div class="nei">
				<div class="xm">
					<div class="zjhz">
						<div class="zuowz">
							<div>
								<p>中国科技曾经领先世界</p>
								<p>中国古代科技发明灿若星辰，对中国和世界科技发展的贡献巨大。</p>
							</div>
						</div>
					</div>
				</div>
				<div class="xm2">
					<div class="zjhz2">
						<div class="zuowz">
							<div>
								<p>
									虽然被世界追赶上了，但是在党的带领下，中国科技人员的艰苦奋斗下中国科技高速发展</p>
								<p>今天的中国科技一样达到世界领先水平，许多方面更是世界第一</p>
								<p>新四大发明具有同样的意义。弘扬中国古代文明，通过研究历史、科技史发掘更多的古代发明，意义在于以史为鉴，古为今用，服务现实，创造未来。</p>
							</div>
						</div>
					</div>
				</div>
				<div class="xm3">
					<div class="zjhz3">
						<div class="zuowz">
							<div>
								<p>百年大党风华正茂</p>
								<p>科技强国风正帆悬</p>
								<p>百年的风雨历程</p>
								<p>见证了中国共产党领导下</p>
								<p>中国科学技术事业的丰功伟业</p>
								<p>当代青年须自强</p>
								<p>再创科技新辉煌</p>
								<p>实现祖国伟大复兴</p>
							</div>
						</div>
					</div>
				</div>
				<div class="xm4">
					<div class="tzxx">
						<h2 style="color: #ffffff; margin: 0 20px;">拓 展 学 习</h2>
					</div>
					<div class="ok" style="border-radius: 12px 0 0 12px;">
						<a href="http://stdaily.com/" target="_blank">
							<img src="img/kjw.jpg" >
							<h3>中国科技网</h3>
						</a>
					</div>
					<div class="ok">
						<a href="http://dangshi.people.com.cn/" target="_blank">
							<img src="img/dsxx.jpg" >
							<h3>党史学习教育网</h3>
						</a>
					</div>
					<div class="ok" style="border-radius: 0 12px 12px 0;">
						<a href="http://cpc.people.com.cn/" target="_blank">
							<img src="img/zggcd.jpg" >
							<h3>中国共产党新闻网</h3>
						</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 页脚 -->
		<div class="yejiaow">
			<div class="jbxx">
				<div class="name">
					<h5 style="line-height: 25px;">21软件2班 黄在桐<br>思想政治理论课实践教学作品</h5>
				</div>
				<h5 style="padding: 20px;"></h5>
				<p>不良信息举报邮箱：help@bilibili.com | 涉未成年举报邮箱：teenprotect@bilibili.com | 不良信息举报电话：4006262233转1</p>
				<a href="https://www.12377.cn/" target="_blank">中央网信办（国家互联网信息办公室）违法和不良信息举报中心</a>
			</div>
		</div>
	</body>
	<script>
		new Swiper('.swiper', {
			autoplay: {
				delay: 3000, //3秒切换一次
				disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay
			},
			loop: true,
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
				bulletActiveClass: 'my-bullet-active',
			},
			// 鼠标变成小手
			grabCursor: true,
		})
	</script>
</html>
